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TOng quan vé AJAX 

Vao nhting nam 90, trén thé gidi, khi ma céng nghé “Web déng” cho phép 
cac lap trinh vién nhanh chong phat trién cdc Ung dung trén nén Web voi 
kha nang tung tac 2 chiéu vGi ngudi str dung, nhiéu ngudi da cé thé hy 
vong rang dén mot ltic nao dé tat ca cdc Ung dung ma ching ta st dung 
sé la cdc ting dung Web thay vi céc phan mém chay d6c lap trén cdc may 
tinh don 1é (Wing dung desktop). Qua that, vi su phat trién chong mat 
cUa mang Internet cling vGi nhUing uu diém cUa cac Ung dung Web (truy 
cap tai mOi noi, khong can nang cap nhiéu vé phia may suf dung,...), 
tuOng lai cua cdc phan mém chac chan sé gan chat v6i céc Ung dung 
Web, néu khong mun ndi 1a c6 thé sé bi thay thé. Tuy nhién, cho dén 
gid, hy vong dé van chua dugc dap Ung mt cach triét dé boi mbt s6 
diém dac trung cUa Ung dung Web lai chinh 1a nhting gidi han tuéng 
ching nhu khong thé vuot qua ni. D6 chinh 1a cdch thc ma ngudi ding 
va Ung dung Web tung tac vGi nhau. 


T6ng quan vé AJAX 


Khac vGi cdc phan mém chay d6c lap 6 may khach (c6é kha nang tuong 
tac gan nhu tUc thdi vGi ngudi ding), cdc Ung dung Web bi gidi han boi 
chinh nguyén ly hoat déng cUa no: tat ca cac giao dich phai thuc hién 
thong qua phuOng thUc giao dich HTTP (HyperText Transport Protocol - 
Giao thc truyén tai qua cac siéu lién két) trong mOt m6 hinh cé tén 
Client/Server. Bat ky mOt tac dong nao cua nguoi dung lén Ung dung 
Web thong qua trinh duyét déu can thdi gian gti vé Server va sau khi xt? 
ly, Server sé tra vé nhting thong tin ngudi ding mong doi. Nhu vay, dd 
tré trong tr'uOng hop nay chinh 1a diéu ma cac Ung dung Web kho cé thé 
sénh vGi nhu cdc phan mém chay trén may tinh don 1é (dac biét 1a trong 
cac Ung dung nhu Ban dO trUc tuyén, soan thao van ban trUc tuyén, sat 
hach truc tuy€n cé tinh th0i gian lam bai...). 


Thuat ng AJAX dude xuat hién vao ngay 18/2/2005 trong mét bai bao 
c6 ten AJAX : A New Approach to Web Applications [1] cUa tac gia Jesse 
James Garrett, céng ty AdapativePath. Ong dinh nghia va tom gon lai tr 
cum tu “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest”. Ngay 


sau d6 thuat ngtf AJAX dudc ph6 bién cu ky nhanh chong trong cOng 
dOng phat trién Web va cho dén nay no 1a m6t trong nhtfng tl khda dudc 
tim kiém nhiéu nhat trén Internet. 


NOi dung dinh nghia cUa Garrett v6 AJAX nhu sau: 


AJAX khéng phai la m6t cong nghé. Né6 1a tap hop cUa nhiéu cong nghé 
vGi thé manh cUa riéng minh dé tao thanh m6t sUc manh mdi. AJAX bao 
gOm: 


e Thé hién Web theo tiéu chuan XHTML va CSS; 

e Nang cao tinh nang dOng va tuong tac bang DOM (Document Object 
Model); 

¢ Trao d6i va xU ly dir li€éu bang XML va XSLT; 

¢ Truy cap dif liéu theo kiéu bat d6ng b6 (asynchronous) bang 
XMLHttpRequest; 

° Va tat ca cdc ky thuat trén dudc lién két lai vGi nhau bang 
JavaScript.[1] 


Trong cac thanh phan cau thanh trén, diém mau ch6t cua AJAX nam 6 
XMLHttpRequest. Day 14 m6t ky thuat do Microsoft khdi xuGng va tich 
hop lan dau tién vao IE5 dudi dang m6t ActiveX. Mozilla tich hop céng 
nghé nay vao Mozilla 1.0/Netscape 6 sau d6 (dung nhién toan b6 cac 
version sau nay cUa Firefox déu cé6 XMLHttpRequest) va hién nay da cé 
trong trinh duyét Safari 1.2 (Apple) va Opera 7 trd lén. Cac van dé vé 
XMLHttpRequest va céch su dung né trén cdc trinh duyét khac nhau sé 
du@c chung ta quay trd lai 6 cdc phan tiép theo. Sau day 1a m6t s6 nét 
khac biét co ban gilfa céc Ung dung Web truyén thong va Ung dung Web 
su dung AJAX. 


Trong cdc Ung dung Web truyén thong, khi ngu0i ding cé m6t can thay 
d6i df liéu trén trang Web, yéu cau thay d6i dudc gti vé server duGi 
dang HTTP request (hay con gQi postback), server s@ xU ly yéu cau nay va 
gli tra lai trang HTML khac thay thé trang ci. Qui trinh nay dudc mé ta 
la nhap-cho va tai lai (click-wait-and-refresh): vi dU ngu0i ding sau khi 
nhan mOt nut “Submit” trén trang Web phai cho cho dén khi server xU ly 


xong mGi c6 thé ti€p tuc cong viéc. Ngu@c lai, trong cdc Ung dung 
AJAX, ngudi ding cé thé nhén chu6t, g6 phim lién tuc ma khéng can 
chd doi. NOi dung tuong Ung vdi tlmg hanh d6ng cUa ngudi ding sé gan 
nhu ngay lap tttc dugc hién thi vao vi tri can thiét (dap Ung gan nhu ttc 
thOi) trong khi trang Web khéng can phai refresh lai toan b6 nOi dung. 
Dé tim hiéu ky hon diéu nay, ta sé xem xét 2 m6 hinh Ung dung nhu [1] 
da dé cap, M6 hinh c6 dién va M6 hinh AJAX-based: 


M6 hinh c6 dién cUa mOt ting dung Web (hinh minh hoa dugc lay tt bai 
bdo cUa Garrett) 


full page refresh 


a client [sick >. wat 23 reitesh[_cici>, wal) refresh [cict> 
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M6 hinh Ung dung Web su dung AJAX (theo bai bdo cUa Garrett) 


partial Ul updates 
client 


browser Ul 


asynchronous data transfer data transfer 


LI server bed = 


R6 rang diém khac biét 1a thay vi phai tai ca trang Web thi vOi AJAX 
trinh duyét phia nguOi ding chi can tai vé phan cUa trang Web ma nguodi 
ding mu6n thay di. Diéu nay gitip cho Ung dung Web phan héi nhanh 
hon, thong minh hon. Ngoai ra, diém dac biét quan trong trong céng nghé 
AJAX nam 6G cht? A (Asynchronous) — khéng d6ng bd — tlic 1a ngudi 
ding cUf gli yéu cau cUa minh tdi server va quay lai vGi cong viéc cua 
minh ma khong can ch tra 106i. Khi nao server xU ly xong yéu cau ca 
phia nguOi ding, no sé bao hiéu va ngudi ding cé thé “thu nhan lay” dé 
thé hién nhting thay di can thiét. Vay tat ca co ché nay hoat d6ng thuc 
su’ thé nao? AJAX cho phép tao ra mt AJAX Engine nam gitta giao ti€p 
nay. Khi dé, cdc yéu cau gUi (resquest) va nhan (response) do AJAX 
Engine thuc hién. Thay vi tra dt liéu dudi dang HTML va CSS truc tiép 
cho trinh duy@t, Web server co thé gti tra di liéu dang XML va AJAX 
Engine sé ti€p nhan, phan tach va chuyén héa thanh XHTML + CSS cho 
trinh duyét hién thi. Viéc nay dugc thuc hién trén client nén gidm tai rat 
nhiéu cho server, d6ng thOi ngudi su’ dung cam thay két qua xU ly dugc 
hién thi tUrc thi ma khong can nap lai trang. Mat khac, su’ két hop cUa cac 
cong nghé Web nhu' CSS va XHTML lam cho viéc trinh bay giao dién 
trang Web tt hon nhiéu va gidm dang ké dung lung trang phai nap. 
Day 1a nhtMng loi ich hét sc thiét thuc ma AJAX dem lai. Chting ta sé 
xem xét cU thé cdc thanh phan cau thanh AJAX, nguyén ly hoat d6ng va 
viéc sU dung Javascript két ndi ching trong phan tiép theo. 


Ung dung AJAX xay dung module TU dién truc tuyén 

Sau khi nam du@c nguyén ly cua AJAX, ban doc co thé str dung mot 
cong cu lap trinh web bat ky dé xAy dung cdc ting dung tién ich nhu tra 
cUtu tlr dién (gidng google suggest), tu’ d6ng sao luu van ban dang soan 
(auto save), tu dOng sao luu cdc gia tri form dang nhap... 


M6 ta Ung dung 


Du6i day 1a man hinh module phan mém tU dién trUc tuyén st dung 
cong nghé AJAX Lien ket 


| Address ja http: /flocalhost/ajax/tudienjindex. html >| rea Go 


| Google |G) urlencode ~| Go | =)” (©) Settings {inks @)Trang chu-WebTreTho =” 
© ~- 


fg Tu dien thuat ngC? Tin hoc 


Tinh nang: 

1. Ty déng gai ¥ cdc tly cé trong tir dién 
tueng tng véi chit cai gd vao 

2. Hien thi nhhanh chéng nghia cilia tir trong 6 
ma khéng can reload lai cd trang 


Mi ban nhap thuat ngt?tin hoc can tra ctru 
trong 6 didi day: 


Fi OK | 
PHP 
Pilfering 
Ping 
PKC >| 


vidu 


Ngudi ding g6 vao m6t tl can tra cUtu bat ky, sau mOi ky tu duc nhap 
vao 6 tra ctu, danh sach cac tr trong CSDL tt dién cé cac ky ty tuong 
Ung ngay lap ttc hién ra trong mOt danh sach d6 xuOng, gitip ngudi ding 
dé dang nhdap liéu va lua chon (giOng cach lam viéc cUa Google Suggest) 


Sau khi cé tU can tra ctu, nguOi ding nhan ok, nghia cUa tl dé ngay lap 
tUtc hién ra phia dui (khéng can reload lai trang) 


[philosophy Ok| 


philosophy. 
(danh tiv) Triét hoc, triét ly 

(Idoms) Natural philosophy: Khoa hoc ty 
nhién 


hinh minh hoa 2 


Phia nguoi ding chi biét dén 1 trang duy nhat 1a index.html. Hau trudng 
cUa Ung dung 1a co ché Ajax duc thuc hién trong cdc file javascript 
included va cac file asp hO tr¢ truy xudt CSDL qua cac tham s6 gli theo 
duOng XMLHTTPRequest tv file ajax.js va ajax_search,js. 


Ma ngu6n minh hQa 


Doan code minh hoa don gian duGi day (viét trén ASP va CSDL Access) 
s@ gitip ban hiéu r6 hon co ché nay. 


T@p index.html 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtm11-transitional.dtd"> 


<html lang="en-US"> 


<head> 


<style type="text/css" media="screen"> 
body { 

font: 11px arial; } 
suggest_link { 
background-color: #FFFFFF; 
padding: 2px 6px 2px 6px;} 
suggest_link_over { 
background-color: #3366CC; 
padding: 2px 6px 2px 6px;} 
#search_suggest { 

position: absolute; 
background-color: #FFFFFF; 
text-align: left; 

border: 1px solid #000000; } 
label { 

width:4em; 

folat:left 

text-allign:right; 
margin-right:0.5em; 


display:block; } 


Submit input{ 
margin-left:4.5em; } 

fieldset{ 

boder:1px solid #781351; 
width:20em; } 

Legend { 

color:#fff; 
background:#ffa20c; 
border:1px solid #781351; 
padding:2px 6px} 

</style> 

<script language="JavaScript" type="text/javascript" 
src="ajax_search.js"></script> 


<script language="JavaScript" type="text/javascript" src="ajax.js"> 
</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 

<body> 

<fieldset><legend>TU dién thuat ng Tin hoc</legend> 


<p>Tinh nang: <br>8&mnbsp;1. Ty dong gdi y cac tU cé trong tl dién tuong 
Ung vGi chi? cai g6 vao<br>&nbsp;2. Hién thi nhanh chéng nghia cUa tl? 


trong 6 ma khong can reload lai ca trang </p> 


<p>MO6i ban nhap thuat ngff tin hoc can tra cUtu trong 6 duéi day: 
<br>&nbsp;</p> 


</fieldset> 
<form name=frmSearch id="frmSearch" method=get> 


<input type="text" id="formWord" name="formWord" alt="Search 
Criteria" onkeyup="searchSuggest();" autocomplete="off" /> 


<input type="button" value="OK" 


onclick="sndUserCheck(document.frmSearch.formWord.value);"> </td> 
<br> 


<div id="search_suggest"></div> 
</form> 

<p></p> 

<fieldset style="width: 220; height: 39"> 
<legend>Nghia tu’</legend> 

<div id="TakenOrNot"></div> 
</fieldset> 

</body> 


</html> 


Tép ajax.js 


function createRequestObject() 

{ 

var TO; 

var browser = navigator.appName; 

if(browser == "Microsoft Internet Explorer") { 

// on IE, we have to use ActiveX 

ro = new ActiveX Object(""Microsoft.XMLHTTP"); 
} else { 


// on every other browser, we can directly create anew XMLHttpRequest 
object 


ro = new XMLHttpRequest(); 

} 

return ro; 

} 

var http = createRequestObject(); 

// this function should be called for user input 

// the response in this case is formatted as follows: 

// object|text 

// where object is the id of the HTML element we are going to update 
// and text is what it will be updated to 


// this could obviously work a lot better with some XML 


function handleResponse() 

{ 

if(http.readyState == 4) { 

var response = http.responseText; 
var update = new Array(); 
if(response.indexOf('|' != -1)) { 
update = response.split("|"); 
document.getElementByld(update[0]).innerHTML = update[1]; 
} 

} 

} 


// this function should be called for user input 
// it opens up the usercheck.asp page with a querystring of ‘action’ 


function sndUserCheck(action) 


{ 
http.open("get", "searchMeaning.asp?formWord=" + action); 
http.onreadystatechange = handleResponse; 


http.send(null); 
} 


T@p ajax_search.js 

//Gets the browser specific XmlHttpRequest Object 
function getXmlHttpRequestObject() { 

if (window.XMLHttpRequest) { 

return new XMLHttpRequest(); 

} else if(window.ActiveX Object) { 

return new ActiveX Object("Microsoft.XMLHTTP"); 
} else { 


alert("" Your Browser Sucks! \nIt's about formWorde to upgrade don't you 
think?"); 


} 

} 

//Our XmlHttpRequest object to get the auto suggest 

var searchReg = getXmlHttpRequestObject(); 

//Called from keyup on the search textbox. 

//Starts the AJAX request. 

function searchSuggest() { 

if (searchReq.readyState == 4 || searchReq.readyState == 0) { 

var str = escape(document.getElementById(‘formWord’).value); 
searchReqg.open("GET", 'searchSuggest.asp?formWord=" + str, true); 


searchReq.onreadystatechange = handleSearchSuggest; 


searchReq.send(null); 

} 

} 

//Called when the AJAX response is returned. 
function handleSearchSuggest() { 

if (searchReq.readyState == 4) { 

var ss = document.getElementByld(‘search_suggest’) 
ss.innerHTML = "; 

var str = searchReq.responseText.split("<br>"); 
for(i=0; i < str.length - 1; i++) { 

//Build our element string. This is cleaner using the DOM, but 
//LE doesn't support dynamically added attributes. 


me, 


var suggest = '<div onmouseover="javascript:suggestOver(this);" '; 


WoT, 


suggest += 'onmouseout="javascript:suggestOut(this);" '; 
suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; 
suggest += 'class="suggest_link">' + str[i] + '</div>'; 
ss.innerH TML += suggest; 

} 


} 


//Mouse over function 

function suggestOver(div_value) { 
div_value.className = 'suggest_link_over'; 

} 

//Mouse out function 

function suggestOut(div_value) { 
div_value.className = 'suggest_link’; 

} 

//Click function 

function setSearch(value) { 
document.getElementById('formWord’).value = value; 
document.getElementByld(‘search_suggest').innerHTML = "; 


} 


Tép search_suggest.asp 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Module tu dien</title> 


</head> 


<% 

//Writen by Minhdn 

//Lay bien search bang request, sau do search trong CSDL 
//nhung dong nao co title like bien search thi lay ra 

%> 

<!--#include file="connection.asp"--> 

<%///Make sure that a value was sent. 

form Word=request("form Word") 

//Get every page title for the site. 

if len(formWord)>=1 then 


str = "SELECT * FROM dictionary WHERE word like '&formWord&'"%' 
ORDER BY word" 


rs.open str,conn 

do until rs.eof%> 
<%=rs("word")%><br> 
<%rs.movenext 

loop 

rs.close 

set rs=nothing 

end if 


%> 


Té@p Search_mearning.asp 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 
dim strConn, dbConn, RS 

set dbconn= server.createObject(""ADODB.connection") 


dbConn.Open "PROVIDER=MSDASQL;DRIVER={ Microsoft Access 
Driver (*.mdb)};DBQ=" & Server.Mappath("dictionary.mdb") 


set rs = server.createobject("ADODB.recordset") 

‘query the database 

str="SELECT * FROM dictionary WHERE word =" & 
request.querystring("formWord")&""" 

set RS = dbConn.execute(str) 

‘is this name taken or not 

if not RS.eof then 


response.write 'TakenOrNot|<b>"&request.querystring("formWord") &": 
</b><br>"&rs("meaning") 


else 

response.write 'TakenOrNot|Thong bao: " & "Khong co tu nay" 
‘end if 

end if 


%> 


TuOng ty nhu vay, cac Ung dung kiém tra tén dang nhap (ngudi ding 
chon tén dang nhap va check xem tén d6 da cé chua), tu’ dOng sao luu van 
ban dang soan thao (auto save), tu’ d6ng sao lu ndi dung lam viéc cua 
ngudi ding (vi du dién form)... cling dudc thuc hién thong qua co ché 
nay. 


Chtc cac ban thanh cong 


XAy dung Ung dung WAP véi IIS va ASP 

WAP, viét tat cUa Wireless Application Protocol (Giao thttc Ung dung 
khong day), ké thUa cdc chuan Internet (HTML, XML va TCP/IP), cho 
phép cac thiét bi cam tay c6é thé két n6i tdi Server truy xuat thong tin va 
cac dich vu. Giao thttc nay duc thiét ké cho cdc trinh duyét siéu nho 
(micro browser) ding ng6n ngtf danh dau WML (Wireless Markup 
Language). Cong nghé WAP dang 1a cong nghé chudn chu dao cho cac 
Ung dung trén cac thiét bi khong day nhu dién thoai di déng. M6t s6 Ung 
dung WAP dién hinh dang dugc ap dung: dat vé; kiém tra email; xem du 
bao thdi tiét, ti gia, gia c6 phi€u; xem két qua bong da; tra cttu danh ba 
dién thoai... 


Xay dung Ung dung WAP vdi IIS va ASP 
DO NgOc Minh 

Vién CNTT, DH Quéc Gia Ha N6i 

Email: minhdn@vnu.edu.vn 

1. Gidi thiéu 


WAP la viét tat cUa Wireless Application Protocol (Giao thttc ting dung 
kh6éng day), duoc ké thlfa cdc chuan Internet (HTML, XML va TCP/IP), 
cho phép cac thiét bi cam tay cé thé két n6i tdi Server truy xudat thong tin 
va cac dich vu. Giao thUtc nay duc thiét ké cho cac trinh duyét siéu nhd 
(micro browser) nhO sU dung ngén ngif danh dau WML (Wireless Markup 
Language). WML du@c dinh nghia nhu 1a Ung dung XML 1.0 


Céng nghé Wap ra dOi vao nam 1997 bdi Wap forum 
(www.wapforum.org), bao g6m Ericsson, Motorola, Nokia, va Unwired 
Planet. Cong nghé Wap dang 1a céng nghé chudn chu dao cho cac ting 
dung phuc vu trén cac thiét bi khong day nhu cac dién thoai di d6ng ky 
thuat sO. Phién ban mdi nhat gan day 1a phién ban Wap 2.0. 


Cac nha cung cap dinh vu Internet hién nay khong nhting cht trong phat 
trién, cap nhat thong tin cho Website cUa ho ma con rat chti trong t6i cac 


thong tin danh cho WAP. VGi sU ra dOi cUa ngay cang nhiéu céc loai dién 
thoai cé kha nang h6 tro Wap cing vGi sU phat trién cUa hé thOng thong 
tin di d6ng, chac chan Wap sé c6 m6t vai tro quan trOng trong x4 hdi hién 
dai. 


MOt sO Ung dung Wap dién hinh dang dudc ap dung: 


e Kiém tra thong tin vé chO trén tau. 
e Dat mua vé 

e Kiém tra chuyén bay 

e Xem du bao thoi tiét 

e Xem gid cO phiéu 

e Tra cUu danh ba dién thoai 

e Check mail 

e Xem két qua bong da... 


Cac trinh duyét Wap siéu nhd (WAP Micro Browsers) 


Dé via van hién thi cdc trang thong tin lén cdc thiét bi khéng day c6 nho, 
Wap sU dung trinh duyét siéu nho. 

MOt trinh duyét siéu nho thuc chat 1a mét phan mém nho t6n rat it tai 
nguyén b6 nhé cing nhu cac yéu cau vé phan cUng va CPU. N6 cé thé 
hién thi thong tin nhd ng6n ng dénh dau goi la WML 


Trinh duyét siéu nho cfing cé kha nang thong dich cdc phién ban thu nho 
cUa Java Script, goi 14 WML Script. 


MOt sO cac trinh duyét Wap thong dung hién nay nhu: Klondike, Deck-it, 
Gelon...C6 thé download caéc phan mém trinh duyét nay vé dé thuc thi 
va hién thi cdc trang wml trén may tinh cUa ban tU cdc dia chi sau: 
Deck-it: http://www.Pyweb.com 


Klondike: http://www.apachesoftware.com ... 


Gelon: http://www.gelon.net 


WML la gi? 

WML la viét tat cUa Wireless Markup Language. No la ng6n ngtf danh 
dau ké tha tu HTML, tuy nhién WML dua trén XML, do dé no chat ché 
hon HTML. 

WML du%gc str dung dé tao ra cac trang c6 kha nang hién thi trén WAP 
browser. Cac trang trén WML goi la DECKS. Decks dudc thiét lap bdi 
tap hop céac CARDS. 

Vi du mOt trang WML : 

<?xml version="1.0"?> 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml"> 

<wml> 

<card id="card1" title="Minh hoa card 1"> 

<p> 

Chao ban da den voi wml 

</p> 

</card> 


</wml> 


Ban co thé tham khdo thém vé ci phap cua WML tai dia chi 
www.w3schools.com/wap . 


Hién 


Trang wml nay sau khi save vao dia va hién thi nho thi 
Klondike (Trinh duyét nay cho phép m6 trUc ti€p trang nho 
wil binh thuOng nhu m@ J file ) Deck- 


It: 


MOt sO so sanh minh hoa sy khac biét gitta HTML va WML 


HTML WML 

- Cac trang cé dudi 

.htm hoac .html- Hién - Cac trang c6 dudi .wml- Hién thi nho 
thi nho trinh duyét trinh duyét Wap (Wap 


Web (Web browser)IE, browser)Klondike, Deck-it, Gelon... 
Netscape, Opera ... 


Cu phap khong chat Cu phap rat chat ché do str dung céng 
ché nghé XML 
MO6t trang html duc 


goi JA 1 Web page MoOt trang wml duOc goi la mOt card 


Su dung Java Script 
dé chay cac Ung dung 
don gian trén 
ClientMa Java Script 
co thé duc tron lan 
trong ma HTML 


Su dung WML Script (chinh 1a Java 
Script thu gon)Ma WML Script phai 
nam ngoai trang WML. 


Cho phép hién thi Bi gidi han bi man hinh thiét bi 


thong tin cUc ky da (thuOng 1a rat bé), néu c6é hién thi anh 

dang, phong phu (Cac thi cing phai su dung format riéng, vi 

hiéu Ung am thanh du WBMP co kich thu‘6c va dung lung 

hinh anh...) file rat nhd, ngoai ra, day 14 anh den 
trang. 


2. Cau hinh phan mém may chu IIS (Internet Information Servies) cho 
phép thuc thi ch'c nang cua Wap Server 


Nhu ta da biét, tt’ Windows 2000, IIS du@c tich hop san trong b6 cai va la 
mt thanh phan cai dat tiy chon (option). Cac cau hinh mac dinh trong 
IIS cho phép IIS 1a 1 server phuc vu cac Ung dung Web, tuy nhién mudn 
IIS cUa ta cé thém kha nang phuc vu cac Ung dung Wap, can thém mOt 
sO thong sO nhu sau: 


1. TU menu Start, chon Setting - Control Panel — Administrative tools - 
Internet Services Manager. MO rOng dau + 6 tén may va click chu6t 
phai vao default web site 

. LUa chOn properties. 

. Chon Tab HTTP headers, 6 mUc MIME map, chon file types 

. Click New Type. 

. GO wml vao 6 Extension 

. GO text/vnd.wap.wml vao 0 Content MIME. 

. Lap lai cdc buGc tu 4 dén 6 va g6 vao cac thong sO theo bang sau 


NOUR WN 


Bang 1: MIME Types and File Extensions 
Type File Extension 


text/vnd.wap.wml .wml 


application/vnd.wap.wmlc .wmlc 


text/vnd.wap.wmlscript .wmls 
application/vnd.wap.wmlscriptc .wmlsc 
Image/vnd.wap.wbmp .wbmp 


Dé xay dung cdc Ung dung WML cho phép tuong tac vGi nguGi suf dung 
giOng nhu cong vic xay dUng trang Web d6ng ta ciing Wa chon cong 
nghé ASP (Active Server Pages) cho phép thuc thi cdc Ung dung trén may 
chu truGc khi tra 10i Client. Néu ban da tling str dung ASP cho cac Ung 
dung Web thi ban sé thay m6t diéu co ban la ASP sau khi thUc thi trén 
may chU sé tra vé cho Client ma HTML 1a ma ma trinh duyét cé thé hiéu 
duoc. Nhu vay, khi chuyén sang xay dung Ung dung trén WML, dé hién 
thi dudc trang tra vé trén wap browser thi ban chi can chi dinh ASP tra 
vé ma WML la xong. Cac thao tac con lai gidng hét nhu truy xuat Web 
d6ng. 


Hién tai WML cua ta van G trang thai tinh, ta can phai thém vao asp.dll 
dé IIS co kha nang tao ra van ban wml. Dé lam diéu nay, trong mUc 
Properties cua Default webserver, chon tab Home Diectory, Click 
Configuration, bang sau hién ra: 


ta chon add, sau d6 dién cdc ni dung vao bang Add/Edit Application 
Extension Mapping nhu sau: 


les 


Nhu vay 1a ta da cau hinh xong IIS, ngoai ra 6 trén dau mOi trang asp, 
muOn hién thi trén wap browser ta can thém doan 1énh sau: 


<% response.ContentType = "text/vnd .wap.wml" %> 

Sau khi cau hinh may chu, ta c6 thé tao riéng 1 thu mUc trén 6 C, vi du: 
C:\WAP-applications, sau d6 chép file wml 6 trén dat tén file 14 index.wml. 
Ngoai ra, ta g6 thém file sau va dat tén la index.asp 

<% response.ContentType = "text/vnd.wap.wml" %> 

<?xml version="1.0"?> 

<wml> 

<card id="card1" title="Minh hoa asp"> 

<p> 

<%response.write(""Chao ban")%> 

</p> 

</card> 


</wml> 


Thiét dat duOng dan ao (Virtual directory) ti thu mUc nay mang tén 
wap, sau dé khdi dOng trinh duyét Wap, g6 vao 6 dia chi dong cht: 

hai truOng hop trén man hinh trinh duyét hién ra ndi dung Chao ban cé 
nghia 1a may chU cUa ta da san sang dé chay cac Ung dung tiép theo. 


3. Minh hoa Ung dung hién thi va cap nhat CSDL qua Wap Browser 


3.1. Chung ta cting nhau xay dung m6t Utng dung nho cho phép hién thi 
CSDL 1a 1 danh sdch bao g6m tén va sO dién thoai tuong Ung cUa ngudi 


d6. CSDL cUa ta dudc tao trén Access, cé tén 1a danhba.mdb, g6m 1 bang 
danhsach va 2 truOng ten (kiéu text) va dienthoai(kiéu sO) nhu sau: 


Table: danhsach 
Ten Text 


Dienthoai Number 


Cac file ta sé x4y dung tuong Ung g6m: 

Display.asp cho phép hién thi CSDL 

Form.wml cho phép nhap dU liéu 

Insert.asp cho phép cap nhat dU liéu tu form vao CSDL 
3.2. Ma nguOn tung file tuong Ung: 

Display.asp 

<% Response.ContentType = "text/vnd.wap.wml" %> 
<?xml version="1.0" encoding="iso-8859-1"?> 


<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www. wapforum.org/DTD/wml_1.1.xml"> 


<wml> 
<!-- MAIN CARD--> 


<card id="Danhbadt"> 


<p align="left"><small><b>Danh ba DT </b></small></p> 
<% 


strconn = "DRIVER=Microsoft Access Driver (*.mdb);DBQ=" & 
Server.MapPath("danhba.mdb") 


set conn = server.createobject(""ADODB.Connection") 
conn.open strconn 

set rs = server.createobject("adodb.recordset") 
Query = "Select * from danhsach" 

rs.open Query, conn 

if not rs.eof Then rs.movefirst 

Do While NOt Rs.EOF 

%> 

<p align="left"> 

<small> 

<h2><%=rs("ten")%></h2> 
<%=r1s("dienthoai")%><br/> 

</small> 

</p> 

<% 

rs.movenext 


Loop 


else 

response. write(""<p align='left'><small>D.sach chua co ai</small></p>") 
End if 

rs.close 

Set conv = nothing 

set rs= nothing 

set conn = nothing 

%> 

</card> 

</wml> 

Form.wml 

<?xml version="1.0"?> 

<!IDOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www. wapforum.org/DTD/wml_1.1.xml"> 

<wml> 

<card title="Input"> 

<p> 

Ten: <input type="text" name="ten" size="15"/><br/> 

Dienthoai: <input type="text" name="dienthoai" size="15"/> 


</p> 


<do type="accept" label="Send"> 

<go href="insert.asp" method="post"> 

<postfield name="ten" value="$ten"/> 

<postfield name="coquan" value="$coquan"/> 
<postfield name="dienthoai" value="$dienthoai"/> 
</go> 

</do> 

</card> 

</wml> 

Insert.asp 

<% 

Dim adoCon 

Dim rsAddnew 

Dim strSQL 

set rs = server.createobject("adodb.recordset") 

Set adoCon = Server.CreateObject("ADODB.Connection") 


adoCon.Open "DRIVER={ Microsoft Access Driver (*.mdb)}; DBQ=" & 
Server.MapPath("danhba.mdb") 


Set rsAddnew = Server.CreateObject("ADODB.Recordset") 
strSQL = "SELECT * FROM danhsach;" 


rsAddnew.CursorType = 2 


rsAddnew.LockType = 3 

rsAddnew.Open strSQL, adoCon 

rsAddnew.AddNew 

rsAddnew.Fields("ten") = Request("ten") 

rsAddnew.Fields("dienthoai") = Request("dienthoai") 

rsAddnew. Update 

rsAddnew.Close 

Set rsAddnew = Nothing 

Set adoCon = Nothing 

Response.Redirect "danhbadienthoai.asp" 

%> 

</p> 

</card> 

</wml> 

Ghi ca 3 tap tin trén vao thu muUc ban vUa tao, khdi d6ng Wap browser 
rOi gd vao tU trinh duyét http://localhost/wap/form.wml Sau khi ban nhap 
tén va sO dién thoai r6i submit, néu man hinh hién thi tén va s6 dién 
thoai ban vUa nhap thi c6 nghia 1a ban da thanh cong. 


TuOng ty nhu vay, ban co thé tham khao thém cu phap cdc thé cla 
WML ciing nhu WML Script dé xay dung cho minh cac ting dung phong 
pht hon. Riéng d6i vi tng dung CSDL ban vtra lam, ban cé thé thém 
chUc nang Xéa, sUfa va tim kiém dé chuong trinh trén tro thanh m6t Ung 
dung hoan chinh. 


Chtc cac ban thanh cong 
Tai li€u tham khao: 


1. http://www.w3schools.com/wap 


